@use '@angular/material' as mat;
@mixin main-sidebar($background, $foreground, $primary) {
  background-color: mat.m2-get-color-from-palette($background, card);
  .mat-drawer-inner-container {
    @include scrollbar(mat.m2-get-color-from-palette($foreground, divider));
  }
  .mat-mdc-tab-header {
    background-color: mat.m2-get-color-from-palette($background, background);
    .mat-mdc-tab {
      .mdc-tab__text-label {
        color: mat.m2-get-color-from-palette($foreground, text);
      }
      &.mdc-tab--active {
        .mdc-tab__text-label {
          color: mat.m2-get-color-from-palette($primary, text);
          opacity: 1;
        }
      }
    }
    .mdc-tab__content {
      background-color: transparent;
    }
  }

  .mat-expansion-panel {
    background-color: mat.m2-get-color-from-palette($background, background);
    color: mat.m2-get-color-from-palette($foreground, text);
    .mat-expansion-panel-header-title,
    .mat-expansion-panel-header-description,
    .mat-expansion-indicator::after {
      color: mat.m2-get-color-from-palette($foreground, text, 0.75);
    }
    .mat-mdc-list-base {
      .mat-list-option {
        color: mat.m2-get-color-from-palette($foreground, text, 0.75);
      }
    }
  }

  .builder-version {
    .mdc-list-item__content {
      .mat-icon:not(.mat-primary) {
        color: mat.m2-get-color-from-palette($foreground, text, 0.5);
      }
      .title,
      .time {
        color: mat.m2-get-color-from-palette($foreground, text, 0.75);
        &:focus-visible {
          color: mat.m2-get-color-from-palette($primary);
          border-bottom-color: mat.m2-get-color-from-palette($foreground, divider);
        }
      }
    }
    .mat-expansion-panel-body {
      @include scrollbar(mat.m2-get-color-from-palette($primary));
    }
  }

  .page-list {
    color: mat.m2-get-color-from-palette($foreground, text, 0.75);
    background-color: mat.m2-get-color-from-palette($background, background);
    @include mat.elevation(3, mat.m2-get-color-from-palette($foreground, divider), 0.4);
    .lists-wrapper {
      position: relative;

      &:after {
        background: linear-gradient(
          180deg,
          transparent 0%,
          mat.m2-get-color-from-palette($background, background) 80%
        );
      }
      &:before {
        background: linear-gradient(
          0deg,
          transparent 0%,
          mat.m2-get-color-from-palette($background, background) 80%
        );
      }
    }
    .lists {
      @include scrollbar(mat.m2-get-color-from-palette($primary));
      .item {
        border-bottom: 1px solid mat.m2-get-color-from-palette($foreground, divider);
        color: mat.m2-get-color-from-palette($foreground, text, 0.75);
        a {
          color: mat.m2-get-color-from-palette($foreground, text, 0.75);
          &:hover {
            color: mat.m2-get-color-from-palette($primary);
          }
        }

        &.active {
          background-color: mat.m2-get-color-from-palette($primary, 0.1);
          &:after {
            background-color: mat.m2-get-color-from-palette($primary);
          }
        }
      }
    }
    .pager {
      .mat-mdc-paginator {
        background-color: mat.m2-get-color-from-palette($background, background);
        color: mat.m2-get-color-from-palette($foreground, text, 0.75);
      }
    }
  }

  .builder-settings {
    .cards {
      @include scrollbar(mat.m2-get-color-from-palette($primary));
    }
  }

  .cards {
    .group {
      &:hover {
        background-color: mat.m2-get-color-from-palette($primary, 0.07);
        transition: all 0.2s ease;
      }
    }
    .item {
      .add {
        background-color: mat.m2-get-color-from-palette($primary, 100, 0.8);
      }
      .inner {
        background-color: mat.m2-get-color-from-palette($background, card);
        transition: background 0.1s ease-in-out;
        @include mat.elevation(1, mat.m2-get-color-from-palette($background, focused-button), 0.2);
        &:hover {
          @include mat.elevation(1, mat.m2-get-color-from-palette($background, hover), 0.2);
          background: mat.m2-get-color-from-palette($primary, 0.08);
        }
        .custom-icon {
          color: mat.m2-get-color-from-palette($foreground, text, 0.7);
        }
        &.active {
          background-color: mat.m2-get-color-from-palette($primary);
          color: mat.m2-get-color-from-palette($primary, default-contrast);
          .custom-icon {
            color: mat.m2-get-color-from-palette($primary, default-contrast);
          }
        }
      }
    }
  }
  .child {
    .mat-expansion-panel {
      .mat-expansion-panel-body {
        background-color: mat.m2-get-color-from-palette($primary, 0.07);
      }
    }
  }
}
